<template>
  <div class="TicketView">
      <van-form validate-first ref="form">
        <div class="mg_bottom_20" v-for="(item, index) in fields" :key="index">
          <!-- 字符串 -->
          <van-field
            v-if="item.field_type_id === 5"
            :label="item.field_name"
            v-model="form_data[item.field_key]"
            name="pattern"
            placeholder="请输入"
            :required="item.field_attribute == 2"
            :disable="item.field_attribute == 1"
            input-align="right"
          />

          <!-- 整型 -->
          <div v-if="item.field_type_id === 10">
            <van-number-keyboard
              v-model="form_data[item.field_key]"
              :show="is_show_popup[item.field_key]"
              :maxlength="9"
              @blur="showPopup('is_show_popup',item.field_key,false)"
            />
            <van-field
              :label="item.field_name"
              readonly
              clickable
              :value="form_data[item.field_key]"
              @touchstart.native.stop="showPopup('is_show_popup',item.field_key,true)"
              placeholder="请输入"
              :required="item.field_attribute == 2"
              :disable="item.field_attribute == 1"
              input-align="right"
              :rules="[{required:true,message: '该选项为必填项'}]"
            />
          </div>

          <!-- 浮点型 -->
          <div v-if="item.field_type_id === 15">
            <van-number-keyboard
              extra-key="."
              v-model="form_data[item.field_key]"
              :show="is_show_popup[item.field_key]"
              @blur="showPopup('is_show_popup',item.field_key,false)"
            />
            <van-field
              :label="item.field_name"
              readonly
              clickable
              :value="form_data[item.field_key]"
              @touchstart.native.stop="showPopup('is_show_popup',item.field_key,true)"
              placeholder="请输入"
              :required="item.field_attribute == 2"
              :disable="item.field_attribute == 1"
              input-align="right"
              :rules="[{required:true,message: '该选项为必填项'}]"
            />
          </div>

          <!-- 单选 -->
          <div v-if="item.field_type_id === 35 || item.field_type_id === 45">
            <van-field
              is-link
              readonly
              clickable
              :label="item.field_name"
              :value="read_only_properties[item.field_key]"
              placeholder="请选择"
              :required="item.field_attribute == 2"
              :disable="item.field_attribute == 1"
              input-align="right"
              @click="showPopup('is_show_popup',item.field_key,true)"
              :rules="[{required:true,message: '该选项为必选项'}]"
            />
            <van-popup
              v-model="is_show_popup[item.field_key]"
              position="bottom"
            >
              <van-picker
                @cancel="showPopup('is_show_popup',item.field_key,false)"
                show-toolbar
                :columns="selectData(item.field_choice)"
                @confirm="confirmSelect($event,item.field_key)"
                value-key="name"
              />
            </van-popup>
          </div>

          <!-- 多选框-->
          <div v-if="item.field_type_id === 40">
            <van-field
              name="checkboxGroup"
              :label="item.field_name"
              :required="item.field_attribute == 2"
            >
              <template #input>
                <van-checkbox-group v-model="form_data[item.field_key]" direction="horizontal">
                  <van-checkbox
                    style="margin-top: 5px"
                    :name="k.id"
                    shape="square"
                    v-for="k in selectData(item.field_choice)"
                    :key="k.id"
                    :disable="item.field_attribute == 1"
                    @click="checkboxData(k.id,item.field_key)"
                  >
                    {{k.name}}
                  </van-checkbox>
                </van-checkbox-group>
              </template>
            </van-field>
          </div>
          <!-- 多选下拉框 -->
          <div v-if="item.field_type_id === 50">
            <van-field
              is-link
              readonly
              clickable
              :label="item.field_name"
              :value="read_only_properties[item.field_key]"
              placeholder="请选择"
              :required="item.field_attribute == 2"
              :disable="item.field_attribute == 1"
              input-align="right"
              @click="showPopup('is_show_popup',item.field_key,true); result = form_data[item.field_key]"
            />
            <van-popup
              v-model="is_show_popup[item.field_key]"
              position="bottom"
              :style="{ height: '70%' }"
            >
              <div class="popup_title van-hairline--bottom">
                <div class="left" @click="showPopup('is_show_popup',item.field_key,false);popup_list = []">取消</div>
                <div class="right" @click="confirmMultiple(item.field_key,selectData(item.field_choice))">确定</div>
              </div>
              <div class="popup_list">
                <van-checkbox-group v-model="result">
                  <div
                    class="popup_item van-hairline--bottom"
                    v-for="k in selectData(item.field_choice)"
                    :key="k.id"
                    @click="multipleAdd(k)"
                  >
                    {{k.name}}
                    <van-checkbox  class="checkbox" :name="k.id"  checked-color="#07c160"></van-checkbox>
                  </div>
                </van-checkbox-group>
              </div>
            </van-popup>
          </div>

          <!-- 日期时间类型 -->
          <div v-if="item.field_type_id === 30">
            <!-- {{is_show_popup[item.field_key]}} -->
            <van-field
              is-link
              readonly
              clickable
              :label="item.field_name"
              :value="form_data[item.field_key]"
              placeholder="请选择"
              :required="item.field_attribute == 2"
              :disable="item.field_attribute == 1"
              input-align="right"
              @click="showPopup('is_show_popup',item.field_key,true)"
              :rules="[{required:true,message: '该选项为必选项'}]"
            />
            <van-popup
              v-model="is_show_popup[item.field_key]"
              position="bottom"
            >
              <van-datetime-picker
                v-model="currentDate"
                type="datetime"
                @cancel="showPopup('is_show_popup',item.field_key,false)"
                @confirm="confirmDatetime('form_data',item.field_key,'datetime',$event)"
              />
            </van-popup>
          </div>

          <!-- 日期类型 -->
          <div v-if="item.field_type_id === 25">
            <van-field
              is-link
              readonly
              clickable
              :label="item.field_name"
              :value="form_data[item.field_key]"
              placeholder="请选择"
              :required="item.field_attribute == 2"
              :disable="item.field_attribute == 1"
              input-align="right"
              @click="showPopup('is_show_popup',item.field_key,true)"
              :rules="[{required:true,message: '该选项为必选项'}]"
            />
            <van-popup
              v-model="is_show_popup[item.field_key]"
              position="bottom"
            >
              <van-datetime-picker
                v-model="currentDate"
                type="date"
                @cancel="showPopup('is_show_popup',item.field_key,false)"
                @confirm="confirmDatetime('form_data',item.field_key,'date',$event)"
              />
            </van-popup>
          </div>
 
           <!-- 文本域 -->
          <van-field
            v-if="item.field_type_id === 55&&item.label.type !== 'sub_table' "
            v-model="form_data[item.field_key]"
            rows="2"
            autosize
            :required="item.field_attribute == 2"
            :disable="item.field_attribute == 1"
            :label="item.field_name"
            type="textarea"
            maxlength="300"
            placeholder="请输入留言"
            show-word-limit
          />
          <!-- 布尔型 20 -->
          <van-cell :title="item.field_name" v-if="item.field_type_id === 20" required>
            <van-switch @change_switch="onchange($event,form_data[item.field_key])" v-model="form_data[item.field_key]" size="24px" slot="right-icon"/>
          </van-cell>
          <!-- 用户选择(配合钉钉接口) 60 -->
          <div v-if="item.field_type_id === 60" >
            <van-cell
              :title="item.field_name"
              is-link
              :value="read_only_properties[item.field_key] ? read_only_properties[item.field_key][0].alias : '请选择'"
              :required="item.field_attribute == 2"
              :disable="item.field_attribute == 1"
              @click="showContact(item.field_key,item.field_name,item.field_type_id,read_only_properties[item.field_key])"
            />
          </div>

          <!-- 多用户选择(配合钉钉接口) 70 -->
          <div v-if="item.field_type_id === 70" >
            <van-cell
              :title="item.field_name"
              is-link
              :value="read_only_properties[item.field_key] ? `
                ${read_only_properties[item.field_key][0].alias}
                ${read_only_properties[item.field_key][1] ? ',' + read_only_properties[item.field_key][1].alias : ''}
                ${(read_only_properties[item.field_key].length > 2) ? '...' : ''}
              ` : '请选择'"
              :required="item.field_attribute == 2"
              :disable="item.field_attribute == 1"
              @click="showContact(item.field_key,item.field_name,item.field_type_id,read_only_properties[item.field_key])"
            />
          </div>
          <!-- 附件选择,(上传接口需自己实现) 80 -->
          <upload
            v-if="item.field_type_id === 80"
            :field_key="item.field_key"
            :urlList="urlList"
            :uploadPath='uploadPath'
             @complete="uploadComplete"
          />

          <!-- 子菜单 -->
          <div  v-if="item.field_type_id === 55&&item.label.type === 'sub_table'">
            <div>
              <div>{{item.field_name}}</div>
              <div v-for="(item, index) in JSON.parse(item.field_template)" :key="index">
                <!-- 字符串 -->
                <van-field
                  v-if="item.field_type_id === 5"
                  :label="item.field_name"
                  v-model="form_data[item.field_key]"
                  name="pattern"
                  placeholder="请输入"
                  :required="item.field_attribute == 2"
                  :disable="item.field_attribute == 1"
                  input-align="right"
                />

                <!-- 整型 -->
                <div v-if="item.field_type_id === 10">
                  <van-number-keyboard
                    v-model="form_data[item.field_key]"
                    :show="is_show_popup[item.field_key]"
                    :maxlength="9"
                    @blur="showPopup('is_show_popup',item.field_key,false)"
                  />
                  <van-field
                    :label="item.field_name"
                    readonly
                    clickable
                    :value="form_data[item.field_key]"
                    @touchstart.native.stop="showPopup('is_show_popup',item.field_key,true)"
                    placeholder="请输入"
                    :required="item.field_attribute == 2"
                    :disable="item.field_attribute == 1"
                    input-align="right"
                    :rules="[{required:true,message: '该选项为必填项'}]"
                  />
                </div>

                <!-- 浮点型 -->
                <div v-if="item.field_type_id === 15">
                  <van-number-keyboard
                    extra-key="."
                    v-model="form_data[item.field_key]"
                    :show="is_show_popup[item.field_key]"
                    @blur="showPopup('is_show_popup',item.field_key,false)"
                  />
                  <van-field
                    :label="item.field_name"
                    readonly
                    clickable
                    :value="form_data[item.field_key]"
                    @touchstart.native.stop="showPopup('is_show_popup',item.field_key,true)"
                    placeholder="请输入"
                    :required="item.field_attribute == 2"
                    :disable="item.field_attribute == 1"
                    input-align="right"
                    :rules="[{required:true,message: '该选项为必填项'}]"
                  />
                </div>

                <!-- 单选 -->
                <div v-if="item.field_type_id === 35 || item.field_type_id === 45">
                  <van-field
                    is-link
                    readonly
                    clickable
                    :label="item.field_name"
                    :value="read_only_properties[item.field_key]"
                    placeholder="请选择"
                    :required="item.field_attribute == 2"
                    :disable="item.field_attribute == 1"
                    input-align="right"
                    @click="showPopup('is_show_popup',item.field_key,true)"
                    :rules="[{required:true,message: '该选项为必选项'}]"
                  />
                  <van-popup
                    v-model="is_show_popup[item.field_key]"
                    position="bottom"
                  >
                    <van-picker
                      @cancel="showPopup('is_show_popup',item.field_key,false)"
                      show-toolbar
                      :columns="selectData(item.field_choice)"
                      @confirm="confirmSelect($event,item.field_key)"
                      value-key="name"
                    />
                  </van-popup>
                </div>

                <!-- 多选框-->
                <div v-if="item.field_type_id === 40">
                  <van-field
                    name="checkboxGroup"
                    :label="item.field_name"
                    :required="item.field_attribute == 2"
                  >
                    <template #input>
                      <van-checkbox-group v-model="form_data[item.field_key]" direction="horizontal">
                        <van-checkbox
                          style="margin-top: 5px"
                          :name="k.id"
                          shape="square"
                          v-for="k in selectData(item.field_choice)"
                          :key="k.id"
                          :disable="item.field_attribute == 1"
                          @click="checkboxData(k.id,item.field_key)"
                        >
                          {{k.name}}
                        </van-checkbox>
                      </van-checkbox-group>
                    </template>
                  </van-field>
                </div>
                <!-- 多选下拉框 -->
                <div v-if="item.field_type_id === 50">
                  <van-field
                    is-link
                    readonly
                    clickable
                    :label="item.field_name"
                    :value="read_only_properties[item.field_key]"
                    placeholder="请选择"
                    :required="item.field_attribute == 2"
                    :disable="item.field_attribute == 1"
                    input-align="right"
                    @click="showPopup('is_show_popup',item.field_key,true); result = form_data[item.field_key]"
                  />
                  <van-popup
                    v-model="is_show_popup[item.field_key]"
                    position="bottom"
                    :style="{ height: '70%' }"
                  >
                    <div class="popup_title van-hairline--bottom">
                      <div class="left" @click="showPopup('is_show_popup',item.field_key,false);popup_list = []">取消</div>
                      <div class="right" @click="confirmMultiple(item.field_key,selectData(item.field_choice))">确定</div>
                    </div>
                    <div class="popup_list">
                      <van-checkbox-group v-model="result">
                        <div
                          class="popup_item van-hairline--bottom"
                          v-for="k in selectData(item.field_choice)"
                          :key="k.id"
                          @click="multipleAdd(k)"
                        >
                          {{k.name}}
                          <van-checkbox  class="checkbox" :name="k.id"  checked-color="#07c160"></van-checkbox>
                        </div>
                      </van-checkbox-group>
                    </div>
                  </van-popup>
                </div>

                <!-- 日期时间类型 -->
                <div v-if="item.field_type_id === 30">
                  <!-- {{is_show_popup[item.field_key]}} -->
                  <van-field
                    is-link
                    readonly
                    clickable
                    :label="item.field_name"
                    :value="form_data[item.field_key]"
                    placeholder="请选择"
                    :required="item.field_attribute == 2"
                    :disable="item.field_attribute == 1"
                    input-align="right"
                    @click="showPopup('is_show_popup',item.field_key,true)"
                    :rules="[{required:true,message: '该选项为必选项'}]"
                  />
                  <van-popup
                    v-model="is_show_popup[item.field_key]"
                    position="bottom"
                  >
                    <van-datetime-picker
                      v-model="currentDate"
                      type="datetime"
                      @cancel="showPopup('is_show_popup',item.field_key,false)"
                      @confirm="confirmDatetime('form_data',item.field_key,'datetime',$event)"
                    />
                  </van-popup>
                </div>

                <!-- 日期类型 -->
                <div v-if="item.field_type_id === 25">
                  <van-field
                    is-link
                    readonly
                    clickable
                    :label="item.field_name"
                    :value="form_data[item.field_key]"
                    placeholder="请选择"
                    :required="item.field_attribute == 2"
                    :disable="item.field_attribute == 1"
                    input-align="right"
                    @click="showPopup('is_show_popup',item.field_key,true)"
                    :rules="[{required:true,message: '该选项为必选项'}]"
                  />
                  <van-popup
                    v-model="is_show_popup[item.field_key]"
                    position="bottom"
                  >
                    <van-datetime-picker
                      v-model="currentDate"
                      type="date"
                      @cancel="showPopup('is_show_popup',item.field_key,false)"
                      @confirm="confirmDatetime('form_data',item.field_key,'date',$event)"
                    />
                  </van-popup>
                </div>
      
                <!-- 文本域 -->
                <van-field
                  v-if="item.field_type_id === 55&&item.label.type !== 'sub_table'"
                  v-model="form_data[item.field_key]"
                  rows="2"
                  autosize
                  :required="item.field_attribute == 2"
                  :disable="item.field_attribute == 1"
                  :label="item.field_name"
                  type="textarea"
                  maxlength="300"
                  placeholder="请输入留言"
                  show-word-limit
                />
                <!-- 布尔型 20 -->
                <van-cell :title="item.field_name" v-if="item.field_type_id === 20" required>
                  <van-switch @change_switch="onchange($event,form_data[item.field_key])" v-model="form_data[item.field_key]" size="24px" slot="right-icon"/>
                </van-cell>
                <!-- 用户选择(配合钉钉接口) 60 -->
                <div v-if="item.field_type_id === 60" >
                  <van-cell
                    :title="item.field_name"
                    is-link
                    :value="read_only_properties[item.field_key] ? read_only_properties[item.field_key][0].alias : '请选择'"
                    :required="item.field_attribute == 2"
                    :disable="item.field_attribute == 1"
                    @click="showContact(item.field_key,item.field_name,item.field_type_id,read_only_properties[item.field_key])"
                  />
                </div>

                <!-- 多用户选择(配合钉钉接口) 70 -->
                <div v-if="item.field_type_id === 70" >
                  <van-cell
                    :title="item.field_name"
                    is-link
                    :value="read_only_properties[item.field_key] ? `
                      ${read_only_properties[item.field_key][0].alias}
                      ${read_only_properties[item.field_key][1] ? ',' + read_only_properties[item.field_key][1].alias : ''}
                      ${(read_only_properties[item.field_key].length > 2) ? '...' : ''}
                    ` : '请选择'"
                    :required="item.field_attribute == 2"
                    :disable="item.field_attribute == 1"
                    @click="showContact(item.field_key,item.field_name,item.field_type_id,read_only_properties[item.field_key])"
                  />
                </div>
                <!-- 附件选择,(上传接口需自己实现) 80 -->
                <upload
                  v-if="item.field_type_id === 80"
                  :field_key="item.field_key"
                  :urlList="urlList"
                  :uploadPath='uploadPath'
                  @complete="uploadComplete"
                  />
              </div>
            </div>
          </div>
        </div>
      </van-form>
    <!-- 联系人 -->
    <transition name="van-slide-right">
      <contact ref="contact" @contactList="contactList"/>
    </transition>
  </div>
</template>

<script>
import moment from 'moment';
import contact from '../components/contact.vue'
import upload from '../components/uploadImage.vue'
export default {
  components:{
    contact,
    upload
  },
  props:{
    fields:{
      type:Array,
      required:true
    }
  },
  data(){
    return{
      field_list:this.fields,
      read_only_properties:{}, // 只读属性,选择器用户看的文本,id存在form
      currentDate: new Date(),
      show_namber_keyboard: false, // 整数键盘
      show_float_keyboard: false, // 浮点数键盘
      init_state:{},
      form_data:{},
      is_show_popup:{},
      contact_transfer_key:'', // 联系人选择后暂存转交的key
      popup_list:[], // 第三数组接受,用于内存中暂存的数据
      result:[],
      urlList:[],
      uploadPath:'tickets/',
    }
  },
  created(){
    this.initForm()
  },
  methods:{
    // 上传完成,返回数据
    uploadComplete(data){
      this.form_data[data.field_key] = data.urlList
    },
    // 多选框数据处理
    checkboxData(id,key){
      let list = this.form_data[key].map(item => {return item})
      if(list.includes(id)){
        list.splice(list.indexOf(id),1)
      }else{
        list.push(id)
      }
      // 复杂对象套复杂对象必须delete
      this.$delete(this.form_data,key)
      this.$set(this.form_data,key,list)
    },
    // 联系人选择
    showContact(key,title,type,list){
      this.contact_transfer_key = key
      this.$refs.contact.show({type,title,list})
    },
    // 联系人返回列表
    contactList(list){
      if(list.length == 1){
        this.$delete(this.read_only_properties,this.contact_transfer_key)
        this.$set(this.read_only_properties,this.contact_transfer_key,list)
        this.$set(this.form_data,this.contact_transfer_key,list[0].username)
      }else if(list.length > 1){
        let id_list = list.map(item => {
          return item.username
        })
        this.$delete(this.read_only_properties,this.contact_transfer_key)
        this.$set(this.read_only_properties,this.contact_transfer_key,list)
        // console.log(this.read_only_properties[this.contact_transfer_key])
        this.$set(this.form_data,this.contact_transfer_key,id_list)
      }else{
        // 防止选择后删除
        this.$set(this.read_only_properties,this.contact_transfer_key,'')
        this.$set(this.form_data,this.contact_transfer_key,null)
      }
    },
    // 开关状态改变(Boolean类型的字段)
    change_switch(value,key){
      this.$set(this.form_data,key,value)
    },
    // 初始化表单
    initForm(){
      // 生成新的表单绑定数据
      this.form_data = {}
      this.is_show_popup = {}
      this.read_only_properties = {}
      let field_type_obj = {
        "5":"",
        "25":"",
        "30":"",
        "55":"",
        "80":"",
        "10":null,
        "15":null,
        "35":null,
        "45":null,
        "60":null,
        "40":[],
        "50":[],
        "70":[],
        "20":false
      }
      this.fields.forEach(field=>{
        // 1.所有可带弹框字段
        this.is_show_popup[field.field_key] = false
        // 2.所有用户展示和后台返回值不一字段
        this.read_only_properties[field.field_key] = ''
        // 3.后台返回字段,默认值
        // 字符类: 5,30,25,55,80 '',数字类:10,15,35,45,60 null, 数组类: 40,50,70 [],布尔类:20 false
        this.form_data[field.field_key] = field_type_obj[field.field_type_id]
      })
    },
    // 父组件获取表单
    getFormData(){
      return this.form_data
    },
    // 显示popup,动态绑定视图不更新处理
    showPopup(obj_name,key,value){
      // 动态添加的属性 $set也不能让视图更改,需要先删除
      this.$delete(this[obj_name],key)
      this.$set(this[obj_name],key,value)
    },
    // 选择器数据包装
    selectData(obj){
      let arr = Object.keys(obj).map(item=>{
        return {id:item - 0,name:obj[item]}
      })
      return arr
    },
    // 确认选择日期时间
    confirmDatetime(obj_name,key,type,value){
      let str = ''
      if(type == 'date'){
        str = moment(value).format('YYYY-MM-DD');
      }else{
        str = moment(value).format('YYYY-MM-DD HH:mm:ss'); 
      }
      this.$set(this[obj_name],key,str)
      this.$delete(this.is_show_popup,key)
      this.$set(this.is_show_popup,key,false)
    },

    // 确认选择下拉框
    confirmSelect(value,key) {
      this.$set(this['read_only_properties'],key,value.name)
      this.$set(this['form_data'],key,value.id)
      this.$delete(this.is_show_popup,key)
      this.$set(this.is_show_popup,key,false)
    },
    // 多选下拉框确认
    confirmMultiple(key,multiple_list){
      if(this.result.length!= 0){
        this.popup_list = []
        let id_list =this.result
        multiple_list.forEach((item) => {
          this.result.forEach(id => {
            if(id == item.id){
              this.popup_list.push(item)
            }
          })
        })
        let str = `${
            this.popup_list[0].name
          }${
            this.popup_list[1]?', '+ this.popup_list[1].name:''
          }${
            this.popup_list[2]?', ...':''
        }`
        // id
        this.$delete(this.form_data,key)
        this.$set(this.form_data,key,id_list)
        // 页面显示
        this.$set(this.read_only_properties,key,str)
        // 弹框
        this.showPopup('is_show_popup',key,false)
        // 清空内存数组
        this.popup_list = []
        this.result = []
        }
    },
    // 多选添加内存数组
    multipleAdd(value){
      if(this.result.length == 0){
        this.result.push(value.id)
      }else{
        let k
        this.result.forEach((item,index)=>{
          if(item == value.id){
            k = true
            this.result.splice(index,1)
          }
        })
        if(!k){
          this.result.push(value.id)
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.mg_bottom_20{
  margin-bottom: 20px;
}
.field_template{
  padding: 2px 10px;
  color: rgb(199, 195, 195);
}
.popup_title{
  height: 44px;
  width: 100%;
  .left{
    float: left;
    height: 44px;
    padding: 0 10px;
    color: #1989fa;
    font-size: 14px;
    line-height: 44px;
  }
  .right{
    float: right;
    height: 44px;
    padding: 0 10px;
    color: #1989fa;
    font-size: 14px;
    line-height: 44px;
  }
}
.popup_list{
  position: absolute;
  top: 45px;
  bottom: 0;
  width: 100%;
  .popup_item{
    position: relative;
    height: 36px;
    line-height: 36px;
    font-size: 14px;
    margin: 0 10px;
    .checkbox{
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 0;
    }
  }
}
</style>
